<template>
    <div class="wrapper">
        <input id="exp" class="exp" v-model="isShow" type="checkbox">
      <div class="text">
        <slot></slot>
      </div>
      <div class="btn-wrapper" :class="{'btn--show':isShow}">
            <div class="arrow-btn" v-if="!isShow" @click="handleToggle">
                展开
                <i class="el-icon-arrow-down"></i>
            </div>
            <div class="arrow-btn" v-else @click="handleToggle">
                收起
                <i class="el-icon-arrow-up"></i>
            </div>
        </div>
    </div>
  </template>
  
  <script>
    export default {
      name: 'MoreText',
      props: {
        //省略的行数
        rows: {
          type: Number,
          default: 2
        },
      },
      data(){
        return {
          isShow: false
        }
      },
      methods: {
        handleToggle(){
            this.isShow =!this.isShow;
            console.log("展示与收齐",this.isShow);
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .wrapper {
      display: flex;
      width: 100%;
      overflow: hidden;
      padding: 15px;
    }
  
    .text {
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: justify;
      /* display: flex; */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      position: relative;
      margin-bottom: 20px;
    }

    .btn-wrapper{
        position: absolute;
        bottom: 0;
        height: 90px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        background: linear-gradient(to bottom,transparent 10%,#fff 70%);
        color: #2979ff;
    }

    .btn--show{
        background: transparent; 
    }

    .exp {
        display: none;
    }

    .arrow-btn{
        cursor: pointer;
    }

    .exp:checked + .text {
        -webkit-line-clamp: 999;
    }

  </style>
  